/*
 * @Author: Salaing
 * @Date: 2024-05-20 22:16:33
 * @LastEditors: Salaing
 */
import React, { useEffect, } from 'react';
import StaffAmount from './component/StaffAmount';
import OldStaffTable from './component/OldStaffTable';
import Pie from './component/Pie';
import AgeColumn from './component/AgeColumn';
import Column from './component/Column';
import { useSelector, useDispatch } from 'umi';
import './css/index.less'

const index = () => {
  // 获取数据,链接redux
  const {
    amountDataList,
    pieList, columnList,
    marriageData, staffData, constellationData
  } = useSelector((state) => state.dashboard)

  const dispatch = useDispatch()
  // console.log(
  //   amountDataList,
  //   pieList,
  //   columnList,
  //   marriageData,
  //   staffData,
  //   constellationData,
  // );
  useEffect(() => {
    dispatch({
      type: 'dashboard/initDashboardList'
    })
  }, [])

  return <div className='dashboard-container'>
    {/* 员工组件执行4次 */}
    {
      amountDataList.map((item, index) => {
        return <StaffAmount key={index} {...item} />
      })
    }
    
     {/* 饼状图处理 学历情况，员工性别 */}
    {
      pieList.map((item, index) => {
        return <Pie key={index} {...item} />
      })
    }
    {/* 年龄柱状图 */}
    {pieList[1] && <AgeColumn {...pieList[1]} />}

    {/* 员工婚姻状况 */}
    <Pie {...marriageData} />

    {columnList.map((item, index) => (
      <Column key={index} {...item} />
    ))}

    {/* 最老的十个员工 */}
    <OldStaffTable {...staffData} />

    {/* 星座分布 */}
    <Pie {...constellationData} />
  </div>;
};

export default index;
